<template>
	<view 
	  :class="[type, classs]" 
	  :style="{ '--colorPrimary': color.primary, backgroundColor: type != 'c3' ? backgroundColor : color.primary }"
	>
		<slot></slot>
	</view>
</template>

<script>
	export default{
		props:{
			type:{
				type:String,
				default:"c1"
			},classs:{
				type:String,
				default:""
			}
		},mounted: function() {


	}
	}
</script>

<style lang="scss">
	.c1 {
			color: #ffffff;
		background-image: linear-gradient(to bottom, #056fd1, #006ed7, #006ddd, #036ce3, #0f6be9, #4875ed, #657ff0, #7c8af4, #a4a5f7, #c5c2fa, #e3e0fc, #ffffff,#cccccc,#eeeeee);
	}
	.c2{
			color: #ffffff;
		background-image: linear-gradient(to bottom, #4c77ee, #4f7cee, #5281ee, #5686ee, #5a8bee, #588aee, #568aef, #5489ef, #4a82ef, #3f7bef, #3474ef, #286dee,#cccccc,#eeeeee);
	}
	.c3{
		background-color: var(--color-primary);
		color: #ffffff;
	}
	.c4{
		background-color: #14313f;
		color: #ffffff;
	
	}
</style>